<style>
  .btn-margin-right {
    margin-right: 20px;
  }
</style>
<template>
  <validator name="verifyQuestionForm">
    <form class="col-md-8 col-md-offset-2 form-margin question-form" name="form">
      <div class="form-group">
        <label>请输入密保问题答案</label>
      </div>
      <div class="form-group">
        <p>1.{{state.newQuestionList[0].questionContent}}</p>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:first-a="{'required':true, 'answerequal':state.answerList[0]}" v-model="reAnswer[0]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$verifyQuestionForm.firstA.required">{{$verifyQuestionForm.firstA.required}}</error-template>
          <error-template v-show="$verifyQuestionForm.firstA.answerequal&&!$verifyQuestionForm.firstA.required">{{$verifyQuestionForm.firstA.answerequal}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <p>2.{{state.newQuestionList[1].questionContent}}</p>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:second-a="{'required':true, 'answerequal':state.answerList[1]}" v-model="reAnswer[1]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$verifyQuestionForm.secondA.required">{{$verifyQuestionForm.secondA.required}}</error-template>
          <error-template v-show="$verifyQuestionForm.secondA.answerequal&&!$verifyQuestionForm.secondA.required">{{$verifyQuestionForm.secondA.answerequal}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <p>3.{{state.newQuestionList[2].questionContent}}</p>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:third-a="{'required':true, 'answerequal':state.answerList[2]}" v-model="reAnswer[2]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$verifyQuestionForm.thirdA.required">{{$verifyQuestionForm.thirdA.required}}</error-template>
          <error-template v-show="$verifyQuestionForm.thirdA.answerequal&&!$verifyQuestionForm.thirdA.required">{{$verifyQuestionForm.thirdA.answerequal}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <p>4.{{state.newQuestionList[3].questionContent}}</p>
        <input type="text" autocomplete="off" class="form-control" initial="off" detect-change="off" v-validate:fourth-a="{'required':true, 'answerequal':state.answerList[3]}" v-model="reAnswer[3]" placeholder="请输入密保问题答案">
        <div>
          <error-template v-show="$verifyQuestionForm.fourthA.required">{{$verifyQuestionForm.fourthA.required}}</error-template>
          <error-template v-show="$verifyQuestionForm.fourthA.answerequal&&!$verifyQuestionForm.fourthA.required">{{$verifyQuestionForm.fourthA.answerequal}}</error-template>
        </div>
      </div>
      <button class="btn btn-primary pull-right" v-on:click.prevent="nexStep" >下一步</button>
      <button class="btn btn-default pull-right btn-margin-right" v-on:click.prevent="prevStep" >返回修改</button>
    </form>
  </validator>
</template>
<script>
/**
 * @author guocailee
 */
import { updateQeustion } from 'src/store/actions/security'
export default {
  name: 'verifyQuestion',
  props: {
    state: {
      required: true,
      type: Object
    }
  },
  data() {
    let reAnswer = []
    return { reAnswer }
  },
  vuex: {
    actions: { updateQeustion }
  },
  methods: {
    prevStep() {
      this.$dispatch('prevStep')
    },
    nexStep() {
      let self = this
      self.$validate(true, () => {
        if (self.$verifyQuestionForm.invalid) {
          return
        }
        for (var i = self.state.answerList.length - 1; i >= 0; i--) {
          self.state.newQuestionList[i].questionAnswer = self.state.answerList[i]
        }
        self.updateQeustion(self.state.newQuestionList)
        .then(data => self.$dispatch('nexStep'))
        .catch(data => self.$notify.error(data))
      })
    }
  }
}
</script>
